<template>
  <div class="container-article">
    <!-- 筛选区域 -->
    <el-card>
      <!-- 面包屑 -->
      <div slot="header">
        <!-- 自己封装的面包屑组件组件 -->
        <my-bread>内容管理</my-bread>
      </div>
      <!-- 表单 -->
      <el-form label-width="80px" size="small">
        <el-form-item label="状态：">
          <el-radio-group v-model="filterData.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <!-- 使用自己封装的频道组件 -->
          <!-- <my-channel :value="filterData.channel_id" @input="filterData.channel_id=$event"></my-channel> -->
          <!-- 上面的代码可简写为使用v-model绑定的数据 -->
          <my-channel v-model="filterData.channel_id"></my-channel>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 结果区域 -->
    <el-card style="margin-top:20px">
      <div slot="header">根据筛选条件共查询到 {{total}} 条结果：</div>
      <!-- 表格区域 -->
      <el-table :data="articles">
        <el-table-column label="封面">
          <!-- cover:{type:'',images:[] 取第一张图片进行预览-->
          <template slot-scope="scope">
            <!-- <img :src="scope.row.cover.images[0]" alt /> -->
            <!-- 使用组件提供的图标组件 -->
            <el-image :src="scope.row.cover.images[0]" style="width:150px;height:100px">
              <!-- 加载失败时的图片显示，图片组件提供的属性-->
              <!-- 具名插槽  error  当图片加载失败使用这个插槽 -->
              <div slot="error">
                <img src="../../assets/error.gif" style="width:150px;height:100px" alt />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-if="scope.row.status===1">待审核</el-tag>
            <el-tag v-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              @click="toEditArticle(scope.row.id)"
              plain
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="toDelArticle(scope.row.id)"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <!-- total 指定总条数 -->
      <!-- page-size 设置每一页显示多少条，默认是10条 -->
      <!-- current-page 指定当前是第几页 -->
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next"
        @current-change="pager"
        :current-page="filterData.page"
        :page-size="filterData.per_page"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script type="text/javascript">
// 导入封装的面包屑组件
// import MyBread from "@/components/my-bread";

export default {
  // 注册组件
  // components: { MyBread },

  // 注意：组件名称不能和原生标签重名
  name: "app-article",
  // created() {
  //   // 发请求进行测试
  //   this.$http
  //     .get("articles")
  //     .then(res => {
  //       console.log(res.data);
  //     })
  //     .catch(err => {
  //       console.log(err);
  //     });
  // }
  data() {
    return {
      // 声明筛选条件数据，筛选条件数据提交给后台，数据的字段名称，由后台接口决定
      // 筛选数据是由多个表单元素组成，需要收集所有数据，所以应该使用对象来进行绑定
      filterData: {
        // 当字段的值是null，axios请求不会提交，代表不传
        status: null,
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null,
        page: 1, // 第一页
        per_page: 20 // 每页显示数据的条数
      },
      // 频道下拉选项数据
      channelOptions: [],
      // 日期范围数据 [起始日期,结束日期]
      // 但是选择完成日期范围后，可以根据这个数据给 begin_pubdate end_pubdate 赋值。
      dateArr: [],
      articles: [],
      // 后台返回数据的总条数
      total: 0
    };
  },
  created() {
    // 初始化的时候，调用函数，渲染数据
    // this.getChannelOptions();
    this.getArticles();
  },
  methods: {
    // 获取频道数据
    // async getChannelOptions() {
    //   // 发请求，获取频道数据
    //   const res = await this.$http.get("channels");
    //   // res = {data:{message:'',data:{channels:[// 频道数组 ]}}}
    //   // this.channelOptions = [{id,name}]  数据格式
    //   // console.log(res);
    //   this.channelOptions = res.data.data.channels;
    // },
    // 获取文章数据
    async getArticles() {
      // post('地址','请求体数据')
      // 如果是get请求，如何传递参数对象 get('地址',{params:'get对象参数'})
      const res = await this.$http.get("articles", { params: this.filterData });
      console.log(res);
      this.articles = res.data.data.results;
      // 获取文章的总条数
      this.total = res.data.data.total_count;
    },
    // 分页切换
    pager(newPage) {
      // 修改参数
      // console.log(newPage);
      this.filterData.page = newPage;
      this.getArticles();
    },
    // 根据筛选按钮，筛选对应的数据
    search() {
      this.filterData.page = 1; // 从第一页开始筛选
      this.getArticles(); // 筛选完成后，调用获取文章列表函数，重新渲染页面
    },
    // 选择日期范围
    changeDate(dateArr) {
      // 默认参数 dateArr [起始日期,结束日期]  日期默认是Date类型
      // 但是后台需要的数据 字符串类型  例如：2010-01-01
      // 赋值之前：对dateArr中的日期进行格式的转换
      // 文档：可受 value-format 控制，通过这个数据指定组件产生的日期格式 yyyy-MM-dd
      // 当使用组件的 清空功能，也会触发changeDate函数，改变成null === dateArr

      // console.log(dateArr); // 结果是： [Mon Feb 03 2020 00:00:00 GMT+0800 (中国标准时间), Thu Feb 13 2020 00:00:00 GMT+0800 (中国标准时间), __ob__: Observer]
      if (dateArr) {
        this.filterData.begin_pubdate = dateArr[0];
        this.filterData.end_pubdate = dateArr[1];
      } else {
        this.filterData.begin_pubdate = null;
        this.filterData.end_pubdate = null;
      }
    },

    // 频道需要清空功能
    //默认的清空功能是将值改成空字符
    //但是后台要求：值必须是数字，不能是字符串
    // 所以：当频道清空后,将值改成 null
    // 频道改变时的处理函数
    // changeChannel() {
    //   if (this.filterData.channel_id === "") {
    //     this.filterData.channel_id = null;
    //   }
    // },

    // 编辑文章对应函数
    toEditArticle(id) {
      // 根据文章id跳转到对应的内容编辑区域
      this.$router.push(`/publish?id=${id}`);
    },
    // 删除文章对应函数
    toDelArticle(id) {
      // 确认框（组件提供）
      this.$confirm("是否要删除该文章?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 发送删除文章的请求
          try {
            await this.$http.delete(`articles/${id}`);
            this.$message.success("删除成功");
            this.getArticles();
          } catch (e) {
            // 错误提示
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped lang="less" >
</style>
